<template>
  <!-- 表单组件 -->
  <el-form
    ref="formRef"
    :label-position="labelPosition"
    :label-width="labelWidth"
    :model="newformData"
    :style="{ formStyle }"
  >
    <el-row :gutter="gutter">
      <el-col v-for="(item, index) in formOptions" :key="index" :span="item.span || 8">
        <!-- 在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。 -->
        <el-form-item :label="item.label" :prop="item.key" :rules="item.rules">
          <!-- input输入框 -->
          <el-input
            v-if="item.type === 'input' || (!item.type && !item.customFormItem)"
            v-model="newformData[item.key]"
            :type="item.inputType"
            :rows="item.rows"
            :disabled="item.disabled"
            :placeholder="item.placeholder || ''"
          />
          <!-- 下拉框 -->
          <el-select
            v-if="item.type === 'select'"
            v-model="newformData[item.key]"
            :placeholder="item.placeholder || ''"
            :disabled="item.disabled"
          >
            <el-option
              v-for="(e, idx) in item.selectOpt"
              :label="e.label"
              :value="e.value"
              :key="idx"
            />
          </el-select>
          <!-- 日期选择器 -->
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="newformData[item.key]"
            :type="item.pickerType"
            :disabled="item.disabled"
            :placeholder="item.placeholder || ''"
            style="width: 100%"
            :format="item.format"
            :value-format="item.valueFormat"
          />
          <!-- 时间选择器 -->
          <el-time-picker
            v-if="item.type === 'time'"
            v-model="newformData[item.key]"
            :disabled="item.disabled"
            :placeholder="item.placeholder || ''"
            style="width: 100%"
            :format="item.format"
            :value-format="item.valueFormat"
          />
          <!-- 开关 -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="newformData[item.key]"
            :disabled="item.disabled"
          />
          <!-- 多选 -->
          <el-checkbox-group
            v-if="item.type === 'checkBox'"
            v-model="newformData[item.key]"
            :disabled="item.disabled"
          >
            <el-checkbox
              v-for="(e, idx) in item.selectOpt"
              :label="e.label"
              :name="item.key"
              :key="idx"
            />
          </el-checkbox-group>
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="newformData[item.key]"
            :disabled="item.disabled"
          >
            <el-radio v-for="e in item.selectOpt" :label="e.value" :key="e.value">{{
              e.label
            }}</el-radio>
          </el-radio-group>
          <slot v-if="item.customFormItem" :name="item.key" :newformData="newformData"></slot>
        </el-form-item>
      </el-col>
      <!-- 按钮列（可自定义） -->
      <el-col v-if="footer" :span="footerSpan">
        <el-form-item>
          <template v-if="customBtnGroup.indexOf('default') !== -1">
            <!-- :link是否为链接按钮
                 :type按钮类型-->
            <el-button :type="submitBtnType" @click="submitForm(formRef)" :link="submitBtnLink">
              {{ submitBtnName }}
            </el-button>
            <el-button :type="clearBtnType" @click="resetForm(formRef)" :link="clearBtnLink">
              {{ clearBtnName }}
            </el-button>
          </template>
          <slot v-if="customBtnGroup.indexOf('custom') !== -1" name="btnGroup"></slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'

const props = defineProps({
  // 表单标签域的位置
  labelPosition: {
    type: String,
    default: 'left'
  },
  //   表单数据对象
  formData: {
    type: Object,
    default: () => {}
  },
  //   el-row中指定列直接的间距
  gutter: {
    type: Number,
    default: 20
  },
  //   标签的长度，作为 Form 直接子元素的 form-item 会继承该值，可以使用 auto
  labelWidth: {
    type: String,
    default: '100px'
  },
  formStyle: {
    type: Object,
    default: () => {
      return { 'max-width': '460px' }
    }
  },
  footerSpan: {
    type: Number,
    default: 20
  },
  //   需要渲染的表单项
  formOptions: {
    type: Array,
    default: () => [
      //   {
      //     label: '申请人',
      //     key: 'user',
      //     span: 8,
      //     type: 'input',
      //     rules: [{ required: true, message: '请输入申请人', trigger: 'blur' }]
      //   }
    ]
  },
  footer: {
    type: Boolean,
    default: true
  },
  customBtnGroup: {
    type: String,
    default: 'default'
  },
  submitBtnName: {
    type: String,
    default: '提交'
  },
  submitBtnLink: {
    type: Boolean,
    default: false
  },
  submitBtnType: {
    type: String,
    default: 'primary'
  },
  clearBtnName: {
    type: String,
    default: '清除'
  },
  clearBtnType: {
    type: String,
    default: ''
  },
  clearBtnLink: {
    type: Boolean,
    default: false
  }
})
// 表单数据对象
const newformData = reactive(props.formData)
// Watch(props.formData,(val)=>{

// })
const formRef = ref()
const emit = defineEmits(['submit', 'resetForm'])
// 提交
const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      emit('submit', newformData)
    } else {
      return false
    }
  })
}
// 清空
const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
  emit('resetForm')
}
</script>
<style scoped></style>
